<template>
    <el-card>
        <div class="title">教室申请</div>
        <el-form ref="ruleFormRef"
                 :model="ruleForm"
                 status-icon
                 :rules="rules"
                 label-width="120px"
                 class="demo-ruleForm"
                 @submit="submitForm(ruleFormRef)">
            <el-form-item prop="campus" label="选择校区">
                <el-select @change="handleCampusChange" v-model="ruleForm.campusId" placeholder="请选择校区">
                    <el-option
                        v-for="item in campusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <span style="display: flex;flex-direction: row">
                <el-form-item style="width: 300px;" prop="campus" label="选择教室">
                    <el-select v-model="ruleForm.classroomId" placeholder="请先选择校区">
                        <el-option
                            v-for="item in classroomOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item style="width: 300px;" prop="requestPerson" label="申请类型">
                    <el-select v-model="ruleForm.type" placeholder="" @change="handleTypeChange">
                        <el-option value="0" label="个人"/>
                        <el-option value="1" label="团体"/>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="personRequest" prop="requestId" label="申请个人">
                    <el-input v-model="ruleForm.requestId" placeholder="填写姓名"></el-input>
                </el-form-item>
                <el-form-item v-if="groupRequest" prop="requestId" label="申请团体">
                    <el-input v-model="ruleForm.requestId" placeholder="填写团体名称"></el-input>
                </el-form-item>
                <el-form-item v-if="personRequest || groupRequest" prop="headPersonId" label="负责人学号/教师编号"
                              label-width="200">
                    <el-input v-model="ruleForm.headPersonId" placeholder="填写负责人学号/教师编号"></el-input>
                </el-form-item>
            </span>
            <span style="display: flex;flex-direction: row">
                <el-form-item prop="date" label="选择日期">
                    <el-date-picker @change="handleDateChange" v-model="date" placeholder="选择日期"/>
                </el-form-item>
                <el-form-item prop="startTime" label="选择开始时间">
                    <el-time-select
                        v-model="ruleForm.startTime"
                        style="width: 240px"
                        :max-time="ruleForm.endTime"
                        class="mr-4"
                        placeholder="Start time"
                        start="08:00"
                        step="00:10"
                        end="20:40"
                    />
                </el-form-item>
                <el-form-item prop="endTime" label="选择结束时间">
                    <el-time-select
                        v-model="ruleForm.endTime"
                        style="width: 240px"
                        :min-time="ruleForm.startTime"
                        placeholder="End time"
                        start="08:00"
                        step="00:10"
                        end="20:40"
                    />
                </el-form-item>
            </span>
            <el-form-item prop="reason" label="申请原由/用途">
                <el-input type="textarea" v-model="ruleForm.reason" placeholder="填写申请原由/用途"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-card>
        <div class="title">申请记录</div>
        <el-table
            :data="tableData"
            style="width: 100%; margin-bottom: 20px"
            row-key="date"
            border
            :size="pageSize"
        >
            <el-table-column prop="requestId" label="申请编号"/>
            <el-table-column prop="classroomId" label="教室编号"/>
            <el-table-column prop="requestPerson" label="申请人编号"/>
            <el-table-column prop="date" label="申请时间"/>
            <el-table-column prop="status" label="状态"/>
            <el-table-column prop="timeSlot" label="时间"/>
        </el-table>
    </el-card>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue'
import type {FormInstance, FormRules} from 'element-plus';
import {getStudentClassroomApplication, postStudentClassroomApplication} from "@/service/student/student.service";
import {DateToTimestamp, timestampToDate} from "@/util/time.utils";
import {getLocalStorage} from "@/util/storage.util";

const date = ref('')
const pageSize = ref(20)
// 页码
const tableData = ref([{
    requestId: "",
    classroomId: "",
    requestPerson: "",
    date: "",
    status: "",
    timeSlot: "",
}])
const ruleFormRef = ref<FormInstance>()
// 申请类型
const type = ref<string>('')
// 显示申请人填写框
const personRequest = ref<boolean>(false)
const groupRequest = ref<boolean>(false)
// 页码
const campusOptions = ref([
    {
        value: '',
        label: '',
    }])
const classroomOptions = ref([
    {
        value: '',
        label: '',
    }
])

// 表单对象
interface RuleForm {
    campusId: string,
    classroomId: string,
    type: string,
    requestId: string,
    headPersonId: string,
    date: string,
    startTime: string,
    endTime: string,
    reason: string
}

const ruleForm = reactive<RuleForm>({
    campusId: '',
    classroomId: '',
    type: '',
    requestId: '',
    headPersonId: '',
    date: '',
    startTime: '',
    endTime: '',
    reason: ''
})

// 表单规则
const rules = reactive<FormRules<RuleForm>>({
    campusId: [
        {required: false, message: '校区未选择', trigger: 'blur'}
    ],
    classroomId: [
        {required: false, message: '教室未选择', trigger: 'blur'}
    ],
    type: [
        {required: true, message: '请选择申请类型', trigger: 'blur'}
    ],
    requestId: [
        {required: false, message: '请填写姓名/名称', trigger: 'blur'}
    ],
    headPersonId: [
        {required: false, message: '请填写负责人学号/编号', trigger: 'blur'}
    ],
    date: [
        {required: false, message: '日期未选择', trigger: 'blur'}
    ],
    startTime: [
        {required: false, message: '开始时间未选择', trigger: 'blur'}
    ],
    endTime: [
        {required: false, message: '结束时间未选择', trigger: 'blur'}
    ],
    reason: [
        {required: false, message: '申请理由不能为空', trigger: 'blur'}
    ]
})


onMounted(() => {
    getStudentClassroomApplication(ruleForm.campusId, (data: any) => {
        console.log(data)
        campusOptions.value = []
        tableData.value = []
        for (const campusInfo of data.campusList) {
            campusOptions.value.push({
                value: campusInfo.campusId,
                label: campusInfo.name
            })
        }
        for (const classroomRequestInfo of data.classroomRequestList) {
            tableData.value.push({
                requestId: classroomRequestInfo.requestId,
                classroomId: classroomRequestInfo.classroomId,
                requestPerson: classroomRequestInfo.headPersonId,
                date: timestampToDate(classroomRequestInfo.date),
                status: classroomRequestInfo.status,
                timeSlot: classroomRequestInfo.timeSlot,
            })
        }
        if (data.classesList) {
            for (const classroomInfo of data.classesList) {
                campusOptions.value.push({
                    value: classroomInfo.classroomId,
                    label: classroomInfo.name
                })
            }
        }
    })
})


const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            postStudentClassroomApplication(ruleForm, () => {
                getStudentClassroomApplication(ruleForm.campusId, (data: any) => {
                    console.log(data)
                    campusOptions.value = []
                    tableData.value = []
                    for (const campusInfo of data.campusList) {
                        campusOptions.value.push({
                            value: campusInfo.campusId,
                            label: campusInfo.name
                        })
                    }
                    for (const classroomRequestInfo of data.classroomRequestList) {
                        tableData.value.push({
                            requestId: classroomRequestInfo.requestId,
                            classroomId: classroomRequestInfo.classroomId,
                            requestPerson: classroomRequestInfo.headPersonId,
                            date: timestampToDate(classroomRequestInfo.date),
                            status: classroomRequestInfo.status,
                            timeSlot: classroomRequestInfo.timeSlot,
                        })
                    }
                    if (data.classesList) {
                        for (const classroomInfo of data.classesList) {
                            campusOptions.value.push({
                                value: classroomInfo.classroomId,
                                label: classroomInfo.name
                            })
                        }
                    }
                })
            })
        } else {
            console.log(ruleForm)
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

function handleTypeChange(value: string) {
    type.value = value
    if (type.value === '0') {
        // 个人申请
        personRequest.value = true
        groupRequest.value = false
        let UserInfo = JSON.parse(<string>getLocalStorage("UserInfo"))
        ruleForm.headPersonId = UserInfo.userInfo.referenceId
        ruleForm.requestId = UserInfo.username
    }
    if (type.value === '1') {
        // 团体申请
        personRequest.value = false
        groupRequest.value = true
    }
}

function handleCampusChange(val: any) {
    console.log(val)
    getStudentClassroomApplication(val, (data: any) => {
        console.log(data)
        campusOptions.value = []
        tableData.value = []
        classroomOptions.value = []
        for (const campusInfo of data.campusList) {
            campusOptions.value.push({
                value: campusInfo.campusId,
                label: campusInfo.name
            })
        }
        for (const classroomRequestInfo of data.classroomRequestList) {
            tableData.value.push({
                requestId: classroomRequestInfo.requestId,
                classroomId: classroomRequestInfo.classroomId,
                requestPerson: classroomRequestInfo.headPersonId,
                date: timestampToDate(classroomRequestInfo.date),
                status: classroomRequestInfo.status,
                timeSlot: classroomRequestInfo.timeSlot,
            })
        }
        if (data.classesList.length > 0) {
            for (const classroomInfo of data.classesList) {
                classroomOptions.value.push({
                    value: classroomInfo.classroomId,
                    label: classroomInfo.name
                })
            }
        }
    })
}

function handleDateChange(val: any) {
    ruleForm.date = String(DateToTimestamp(val))
}

</script>


<style scoped>
.title {
    font-size: 20px;
    margin-bottom: 10px;
}
</style>